{extends 'base/site2.html'}
{block name="page_header"}{include file="common/header.html" inline}{/block}
{block name="page_nav"}{include file="common/slide-nav.html" inline}{/block}
{block name="page_styles"}
<link rel="stylesheet" type="text/css" href="/css/mediation/user/index.css" />
<style>
    :not(.input-group)>.bootstrap-select.form-control:not([class*=col-]){
        width: 100%;
    }
    button {
        outline: none!important;
    }

    .btn-on{
        width: 60px;
        height: 25px;
        margin: 0 3px;
        border-radius: 25px;
        font-size: 14px;
    }
    .btn-on{
        cursor: pointer;
        position: relative;
        border: 1px solid white;
        background-color: #4893f8;
    }
    .btn-on-circle{
        position: absolute;
        width: 15px;
        height: 15px;
        top: 5px;
        left: 5px;
        background-color: rgb(255, 255, 255);
        border-radius: 50%;
        box-shadow: 0 0 10px white;
        transition: all .5s;
    }
    .btn-on-text{
        position: absolute;
        right: 10px;
        line-height: 25px;
        color: white;
        transition: all .5s;
    }
</style>
{/block}
{block name="page_scripts"}
<script type="text/javascript" src="/js/mediation/del/del.min.js" init="mediation/del/del"></script>
<script type="text/javascript">
    $('body')
        .on('click','.btnon', function(){
            type = $(this).attr("data-type")
            that = $(this)
            id = $(this).attr("data-id")
            var circle = $(this).find(".btn-on-circle");
            var text = $(this).find(".btn-on-text");
            $.ajax({
                url:"/mediationorgan/ipRestrict",
                method: "post",
                data: {
                    id: id,
                    ipRestrict: type
                },
                success:function(res){
                    if(res.code==200){
                        if(type == 1){
                            that.removeAttr("style");
                            circle.removeAttr("style");
                            text.removeAttr("style");
                            text.text('是');
                            that.attr("data-type",  0); // 修改状态
                        } else {
                            that.attr("style","background-color: #ccc;")
                            circle.attr("style","left: 40px;background-color: #888;box-shadow: 0 0 10px #888;");
                            text.attr("style","right: 30px;color: #888;");
                            text.text('否');
                            that.attr("data-type",  1); // 修改状态
                        }
                        toastr.success(res.message);
                    }else{
                        toastr.error(res.message);
                    }
                }
            })

        })

</script>
{/block}
{block name="page_section"}

    <div class="sessionPage bg-fff">
        <div class="page-header">
          <div class="left">
            <span class="line"></span>
            <strong class="tit">调解部门管理</strong>
          </div>
          <div class="right">
            <a href="/mediationorgan/add">
              <button type="button" class="btn btn-info textright" style="float: right;margin-right: 20px;">新增</button>
            </a>
          </div>
        </div>
    <div style="width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow-x: scroll;">
        <table class="table table-striped table-bordered table-hover text-nowrap">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">调解部门</th>
                    <th scope="col">类型</th>
                    <th scope="col">负责人</th>
                    <th scope="col">联系方式</th>
                    <th scope="col">备注</th>
                    <th scope="col">添加时间</th>
                    <th scope="col">是否ip限制</th>
                    <th scope="col"  class="fix-ele">操作</th>
                </tr>
            </thead>
            <tbody>
                {if $list}
                    {foreach from=$list key=key item=item}
                        <tr>
                            <td>{$item['id']}</td>
                            <td>{$item['name']}</td>
                            <td>{$type[$item['type']]}</td>
                            <td>{$item['director']}</td>
                            <td>{$item['mobile']}</td>
                            <td>{$item['desc']}</td>
                            <td>{$item['addTime']|date_format:"%Y-%m-%d %H:%M:%S"}</td>
                            <td>
                                {if $item.ipRestrict == 1}
                                <p class="btn-on btnon " data-id="{$item.id}" data-type=0>
                                    <!-- 圆点 -->
                                    <span class="btn-on-circle"></span>
                                    <!-- 文字 -->
                                    <span class="btn-on-text">是</span>
                                </p>
                                {else}
                                <p class="btn-on btnon" data-id="{$item.id}" data-type=1 style= "background-color: #ccc;">
                                    <!-- 圆点 -->
                                    <span class="btn-on-circle" style="left: 40px;background-color: #888;box-shadow: 0 0 10px #888;"></span>
                                    <!-- 文字 -->
                                    <span class="btn-on-text"style="right: 30px;color: #888;">否</span>
                                </p>
                                {/if}
                            </td>
                            <td  class="fix-ele">
                                <a href="/mediationorgan/edit?id={$item['id']}">编辑</a>
                                <a href="javascript:;" data-toggle="modal" data-target=".delmodal" data-id="{$item['id']}" role-click="modalshow">删除
                                </a>
                            </td>
                        </tr>
                    {/foreach}
                {/if}
            </tbody>
        </table>
    </div>
        <div class="clearfix pad-no text-nowrap" style="margin-top: 20px;">
            {include file="base/pagenav.html"  action="/mediationorgan/index" pagenum=$curPageNum inline}
            <span style="float:right;margin-right: 10px">共 {$totalnum} 条</span>
        </div>
        <div class="modal fade delmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">确认删除这条数据？</h4>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-danger" role-click="del" data-url="/mediationorgan/del" data-id="">删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{/block}
